<template>
  <div class="login">
    <div class="title">{{getPageTitle()}}</div>
    <div class="login-block">
      <div class="input-item">
        <i class="icon el-icon-user-solid"></i>
        <el-input v-model="username" placeholder="请输入用户名"></el-input>
      </div>
      <div class="input-item">
        <i class="icon el-icon-lock"></i>
        <el-input v-model="password" placeholder="请输入密码"></el-input>
      </div>
      <div @click="handleLogin" class="btn">登录</div>
    </div>
  </div>
</template>
<script>
import getPageTitle from "@/utils/get-page-title";
import {nanoid} from "nanoid";

export default {
  data(){
    return{
      username:'',
      password:'',
    }
  },
  methods: {
    getPageTitle,
    handleLogin(){
      if(!this.username.trim()){
        this.$message.warning('请输入用户名')
        return
      }
      if(!this.password.trim()){
        this.$message.warning('请输入密码')
        return
      }
      if(this.username!=='admin'||this.password!=='FQJ5jx-D'){
        this.$message.error('用户名或密码错误')
        return;
      }
      this.$store.commit('user/SET_TOKEN',nanoid(10))
      this.$router.push('/home')
    }
  }

}
</script>
<style lang="scss">
.el-input{
  flex-grow: 1;
  input{
    border: none !important;
    padding: 0 10px;
    background: none;
  }
}
</style>
<style scoped lang="scss">
.login{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("~@/assets/images/login-background.png") no-repeat center;
  background-size: 100% 100%;
  .title{
    color: #22DFE9;
    font-family: 冷酷体;
    font-size: 54px;
    margin-top: -250px;
    margin-bottom: 150px;
  }
  .login-block{
    width: 500px;
    height: 290px;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid #22DFE9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backdrop-filter: blur(10px);
    background: rgba(34, 223, 233, 0.15);
    .input-item,.btn{
      width: 100%;
      height: calc(100%/3 - 20px);
    }
    .input-item{
      background: #012759;
      border-radius: 8px;
      border: 1px solid #22DFE9;
      display: flex;
      align-items: center;
      padding-left: 10px;
      .icon{
        color: #22DFE9;
      }
    }
    .btn{
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      border-radius: 8px;
      background: linear-gradient(to right,#22DFE9,#0AA7FF);
      font-weight: bold;
      font-size: 18px;
      cursor: pointer;
    }
  }
}
</style>
